<template>
  <view class="password-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <text class="nav-title">修改密码</text>
    </view>

    <!-- 修改密码表单 -->
    <view class="form-section">
      <view class="form-item">
        <uni-easyinput
          v-model="form.oldPassword"
          :type="showOldPassword ? 'text' : 'password'"
          placeholder="请输入原密码"
          class="without-border"
        >
          <template #right>
            <uni-icons
              :type="showOldPassword ? 'eye' : 'eye-slash'"
              size="20"
              color="#999"
              @click="showOldPassword = !showOldPassword"
            ></uni-icons>
          </template>
        </uni-easyinput>
      </view>
      <view class="form-divider"></view>

      <view class="form-item">
        <uni-easyinput
          v-model="form.newPassword"
          :type="showNewPassword ? 'text' : 'password'"
          placeholder="请输入新密码"
          class="without-border"
        >
          <template #right>
            <uni-icons
              :type="showNewPassword ? 'eye' : 'eye-slash'"
              size="20"
              color="#999"
              @click="showNewPassword = !showNewPassword"
            ></uni-icons>
          </template>
        </uni-easyinput>
      </view>
      <view class="form-divider"></view>

      <view class="form-item">
        <uni-easyinput
          v-model="form.confirmPassword"
          :type="showConfirmPassword ? 'text' : 'password'"
          placeholder="请确认新密码"
          class="without-border"
        >
          <template #right>
            <uni-icons
              :type="showConfirmPassword ? 'eye' : 'eye-slash'"
              size="20"
              color="#999"
              @click="showConfirmPassword = !showConfirmPassword"
            ></uni-icons>
          </template>
        </uni-easyinput>
      </view>
      <view class="form-divider"></view>

      <!-- 提交按钮 -->
      <button class="submit-btn" @click="handleSubmit">确认修改</button>

      <!-- 忘记密码入口 -->
      <view class="forgot-password">
        <text @click="navigateTo('/pages/user/security/reset-password')">忘记原密码？</text>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/config/api'
import { mapUviewIconName } from '@/utils/icon-mapper.js'

export default {
  data() {
    return {
      form: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      showOldPassword: false,
      showNewPassword: false,
      showConfirmPassword: false
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    validateForm() {
      if (!this.form.oldPassword) {
        uni.showToast({
          title: '请输入原密码',
          icon: 'none'
        })
        return false
      }
      if (!this.form.newPassword) {
        uni.showToast({
          title: '请输入新密码',
          icon: 'none'
        })
        return false
      }
      if (this.form.newPassword !== this.form.confirmPassword) {
        uni.showToast({
          title: '两次输入的新密码不一致',
          icon: 'none'
        })
        return false
      }
      return true
    },
    async handleSubmit() {
      if (!this.validateForm()) return
      
      try {
        await api.user.changePassword(this.form.oldPassword, this.form.newPassword)
        uni.showToast({
          title: '修改成功',
          icon: 'success'
        })
        
        // 延迟返回
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (error) {
        console.error('修改密码失败:', error)
        uni.showToast({
          title: error.message || '修改失败',
          icon: 'none'
        })
      }
    },
    navigateTo(url) {
      uni.navigateTo({ url })
    }
  }
}
</script>

<style lang="scss" scoped>
.password-container {
  min-height: 100vh;
  background-color: #ffffff;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 30rpx;
  background-color: #ffffff;

  .nav-back {
    padding: 20rpx;
    margin-left: -20rpx;
  }

  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    color: #333;
    margin-right: 44rpx;
  }
}

.form-section {
  padding: 60rpx 40rpx;

  .form-item {
    height: 100rpx;
    display: flex;
    align-items: center;
    position: relative;
  }

  .form-divider {
    height: 1rpx;
    background-color: #eee;
  }

  .submit-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background: linear-gradient(to right, #ff6034, #ee0a24);
    color: #ffffff;
    font-size: 32rpx;
    border-radius: 44rpx;
    margin-top: 60rpx;
    border: none;
  }

  .forgot-password {
    text-align: center;
    margin-top: 40rpx;

    text {
      font-size: 28rpx;
      color: #666;
    }
  }
}
</style> 